import React from 'react'
import { useEffect, useState } from "react"
import BScroll from 'better-scroll'
import axios from "axios"
function Scroll() {
    let bs = null ;
    let [arr, setArr] = useState([])
    useEffect(() => { // 
        axios.get("/list1").then(res => {
            setArr(res.data)
            // console.log(arr)
             setTimeout(()=>{
             bs = new BScroll( "#bs", {
                    // pullUpLoad: true,
                    // scrollbar: true,
                    // pullDownRefresh: true
                    // and so on  
                    // scrollY: true,
                  })
             },100)
           
        })
        return ()=>{ // 组件将要卸载得生命周期,相当于vue的 beforedestory，componentWILLUNMOUNTED
            bs.destory()
        }

    }, [])
    return (
        <div id='bs'>
            <div>
                {
                    arr && arr.length ? arr.map((item, index) => {
                        return <div key={index}>
                            <img src={item.img} alt="" />
                            <h4>{item.name}</h4>
                        </div>
                    }) : "暂无数据"
                }
            </div>

        </div>
    )
}

export default Scroll